<template>
  <!-- <div class="file-button" @click.self="selectFile"> -->
    <div class="file-button" @click.self="selectFile">
    <button type="button" :class="buttonClass">{{ buttonLabel }}</button>
    <input
      type="file"
      ref="fileInput"
      class="hidden-file-input"
      @change="onFileChange"
      :accept="accept"
    />
  </div>
</template>  
    
  <script>
export default {
  name: 'FileButton',
  props: {
    buttonLabel: {
      type: String,
      default: '选择文件'
    },
    buttonClass: {
      type: String,
      default: ''
    },
    accept: {
      type: String,
      default: '*' // 默认接受所有文件类型
    },
    // 可以添加一个prop来接收父组件想要处理文件的方法
    onFileSelected: {
      type: Function,
      required: true
    }
  },

  methods: {
    selectFile() {
      return
      this.$refs.fileInput.click()
    },
    onFileChange(event) {
      const file = event.target.files[0]
      const validExtensions = ['xls', 'xlsx', 'xlsm', 'xlsb'] // 定义有效的 Excel 文件后缀名
      const fileExtension = file.name.split('.').pop().toLowerCase() // 获取文件的扩展名并转换为小写

      if (!validExtensions.includes(fileExtension)) {
        alert('请选择一个有效的 Excel 文件（.xls, .xlsx, .xlsm, .xlsb）')
        // 你可以在这里重置文件输入或采取其他适当的措施
        this.$refs.fileInput.value = '' // 重置文件输入（注意：这在某些浏览器中可能不起作用）
        return
      }
      // 如果文件类型有效，则继续处理文件
      this.onFileSelected(file)
    }
  }
}
</script>  
    
  <style scoped>
.file-button {
  position: relative;
  display: inline-block;
}

.hidden-file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

button {
  /* 你可以在这里添加自定义样式 */
  padding: 0 10px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  background-color: rgb(0 25 51);
  border: 1px solid #0e9cff;
  border-radius: 4px;
  color: #b9eeff;
}
</style>